<template>
  <div>
    <div v-if="flow===null">
      <div class="wfull flx-e">
        <FlowSelect @change="onSelectFlow"></FlowSelect>
      </div>
      <ZgEmpty description="" ></ZgEmpty>
    </div>
    <div v-else>
      <div class="flx-b pd10 mb10" style="background:#f2f2f2;">
        <div>{{ flow.name }}【{{ flow.code }}】</div>
        <FlowSelect @change="onSelectFlow"></FlowSelect>
      </div>
      <div v-if="hasField">
        <div class="mb10">
          <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-row>
              <a-col :span="6">
                <a-form-item label="查询条件" style="margin-bottom:0;">
                  <ZgInput></ZgInput>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="查询条件" style="margin-bottom:0;">
                  <ZgInput></ZgInput>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="查询条件" style="margin-bottom:0;">
                  <ZgInput></ZgInput>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <div class="flx-s pt4 ml15">
                  <ZgButton type="default" class="mr10" icon="refresh">重置</ZgButton>
                  <ZgButton icon="search">查询</ZgButton>
                </div>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table
          size="small"
          bordered
          :customHeaderRow="()=>{return { style: { background: '#f2f2f2' } }}"
          :pagination="false"
          :data-source="list"
          :scroll="{ x:0,y: winHeight - 300 }">
          <a-table-column :width="45" title="序号">
            <template slot-scope="text,record,index">
              <div class="wfull tac">{{ index+1 }}</div>
            </template>
          </a-table-column>
          <a-table-column title="字段名称">
            <template slot-scope="scope">
              {{ scope.name }}
            </template>
          </a-table-column>
          <a-table-column title="字段编码">
            <template slot-scope="scope">
              {{ scope.code }}
            </template>
          </a-table-column>
          <a-table-column title="字段类型">
            <template slot-scope="scope">
              {{ scope.type }}
            </template>
          </a-table-column>
          <a-table-column :width="240" title="操作">
            <template slot-scope="scope">
              <div class="flx-s">
                <ZgButton class="mr10" icon="edit" @click="update(scope)">设置</ZgButton>
                <ZgButton type="default" icon="minus-circle" @click="cancel(scope)">取消设置</ZgButton>
              </div>
            </template>
          </a-table-column>
        </a-table>
      </div>
      <div v-else class="flx-c" :style="{height:`${winHeight-300}px`}">
        <div class="w800">
          <a-row :gutter="20">
            <a-col :span="6" v-for="i in 20" :key="`group${i}`">
              <a-button type="default" class="wfull mb20" @click="selGroup">固有字段分组{{ i }}</a-button>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import FlowSelect from '../demo2/FlowSelect.vue'
export default {
  components: {
    FlowSelect
  },
  computed: {
    hasField () {
      return this.list.length > 0
    }
  },
  data () {
    return {
      flow: null,
      list: [],
      conditions: [
        { code: 'name', compType: '单行文本', label: '名称/编码', defaultVal: '' },
        { code: 'type', compType: '下拉选择', label: '类型', defaultVal: '', extra: { 下拉选项: [{ value: '1', label: '字符串' }, { value: '2', label: '浮点数' }] } }
        // { code: 'age', compType: '整数', label: '年龄', defaultVal: 0 },
        // { code: 'political', compType: '字典', label: '政治面貌', defaultVal: '', extra: { 字典类型: 'political' } }
        // { code: 'is_use', compType: '布尔', label: '启用', defaultVal: 'false' }
        // { code: 'birth', compType: '日期区间', label: '生日', defaultVal: ['', ''] },
        // { code: 'age', compType: '整数区间', label: '年龄', defaultVal: [0, 100] },
        // { code: 'birth1', compType: '日期', label: '生日1', defaultVal: '2025-05-23' },
      ],
      dataBtns: [
        { key: 1, name: '删除', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '修改', icon: 'fa-pencil', isShow: () => { return true } }
      ]
    }
  },
  methods: {
    onSelectFlow (param) {
      this.flow = param
    },
    selGroup () {
      this.list = [
        { key: '1', id: '1', name: '某字段', code: 'c1', type: '布尔值' },
        { key: '2', id: '2', name: '某字段', code: 'c2', type: '字符串' },
        { key: '3', id: '3', name: '某字段', code: 'c3', type: '字符串' },
        { key: '4', id: '4', name: '某字段', code: 'c4', type: '日期' },
        { key: '5', id: '5', name: '某字段', code: 'c5', type: '字符串' },
        { key: '6', id: '1', name: '某字段', code: 'c1', type: '日期时间' },
        { key: '7', id: '2', name: '某字段', code: 'c2', type: '字符串' },
        { key: '8', id: '3', name: '某字段', code: 'c3', type: '字符串' },
        { key: '9', id: '4', name: '某字段', code: 'c4', type: '浮点数' },
        { key: '10', id: '5', name: '某字段', code: 'c5', type: '字符串' },
        { key: '11', id: '1', name: '某字段', code: 'c1', type: '浮点数' },
        { key: '12', id: '2', name: '某字段', code: 'c2', type: '字符串' },
        { key: '13', id: '3', name: '某字段', code: 'c3', type: '字符串' }
      ]
    },
    onSearch () {
      this.$refs.page.endSearch({
        total: this.list.length,
        list: this.list
      })
    },
    update () {},
    cancel () {}
  }
}
</script>

<style lang="scss" scoped>
</style>
